<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：">
              <el-date-picker
                v-model="selectd.StartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="结束日期：">
              <el-date-picker
                v-model="selectd.EndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="点位名称：">
              <el-input v-model="selectd.Name" style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <!-- <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            > -->
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form ref="form" :model="form" style="float: left">
            调度方式：
            <el-radio
              v-model="isAuto"
              label="1"
              border
              size="small"
              @change="changeAuto"
              >自动调度</el-radio
            >
            <el-radio
              v-model="isAuto"
              label="0"
              border
              size="small"
              @change="changeAuto"
              >手动调度</el-radio
            >
            <el-button
              size="mini"
              type="success"
              @click="handleAdd"
              v-if="this.isAuto == '0'"
              >开始手动调度</el-button
            >
            <span v-if="this.isAuto == '1'">正在执行自动调度程序</span>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
      border
    >
      <el-table-column prop="ID" label="序号" align="center"></el-table-column>
      <!-- <el-table-column
        prop="REMARK"
        label="详情描述"
        align="center"
        width="150"
      ></el-table-column> -->
      <el-table-column
        prop="点位名称"
        label="点位名称 "
        align="center"
      ></el-table-column>
      <el-table-column
        prop="垃圾桶类型"
        label="垃圾桶类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="报警时间"
        label="报警时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="车辆"
        label="车辆"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="调度时间"
        label="调度时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="调度描述"
        label="详情描述"
        align="center"
        width="450"
      ></el-table-column>
      <!-- <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope"
          ><el-button type="text" @click="handleAdd(scope.$index, scope.row)"
            >调度指导</el-button
          >
          <el-button
            type="text"
            @click="guidanceRecord(scope.$index, scope.row)"
            >指导记录</el-button
          >
          <el-button
            type="text"
            @click="rectificationRecord(scope.$index, scope.row)"
            >结果反馈</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog
      title="图片展示"
      :visible.sync="showBigDialogVisible"
      width="450px"
    >
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in imageList" :key="item">
          <img :src="item" style="height: 100%; width: 100%" alt="图片丢失了" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <el-dialog
      title="视频展示"
      :visible.sync="showVideoDialogVisible"
      width="450px"
    >
      <video
        id="videoSource"
        style="width: 100%; height: 500px"
        :src="videoPath"
        controls="controls"
      >
        您的浏览器不支持 video 标签。
      </video>
      <!-- <video :ref="'videoPlayer' + index" :controls="isIn">
        <source :src="item.src" type="video/mp4" />
        您的浏览器不支持Video标签。
      </video>
      <i
        v-show="!isPlay"
        class="play-btn el-icon-video-play"
        @click="playVideo"
      ></i>
      <i
        v-show="isPlay && isIn"
        class="play-btn el-icon-video-pause"
        @click="pauseVideo"
      ></i> -->
    </el-dialog>

    <!-- 手动调度 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit"
      width="50%"
    >
      <el-form ref="form" :model="form" label-width="7.729vw">
        <el-form-item label="所属街道：">
          <el-select
            v-model="form.streetClient"
            style="width: 50%"
            placeholder="请选择"
            @change="getCommunityTeamList"
            clearable
            
          >
            <el-option
              v-for="item in streetTeamList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属社区：">
          <el-select
            v-model="form.communityClient"
            style="width: 50%"
            placeholder="请选择"
            @change="getVillageTeamList"
            clearable
          >
            <el-option
              v-for="item in communityTeamList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属小区：">
          <el-select
            v-model="form.villageClient"
            style="width: 50%"
            placeholder="请选择"
            @change="getRoomTeamList"
            clearable
          >
            <el-option
              v-for="item in villageTeamList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="点位名称：">
          <el-select
            v-model="form.roomName"
            style="width: 50%"
            placeholder="请选择"
            @change="getBoxTeamList"
            clearable
          >
            <el-option
              v-for="item in roomTeamList"
              :key="item.ID"
              :label="item.NAME"
              :value="item.ID"
            ></el-option>
          </el-select>
          <el-radio
            v-model="roomRadio"
            label="0"
            style="margin-left: 10px"
            @change="getRoomTeamList"
            >全部</el-radio
          >
          <el-radio v-model="roomRadio" label="1" @change="getRoomTeamList"
            >仅报警</el-radio
          >
        </el-form-item>
        <el-form-item label="垃圾桶类型：">
          <el-select
            v-model="form.boxName"
            style="width: 50%"
            placeholder="请选择"
            @change="getCarTeamList"
            clearable
          >
            <el-option
              v-for="item in boxTeamList"
              :key="item.BOX_ID"
              :label="item.NAME"
              :value="item.BOX_ID"
            ></el-option>
          </el-select>
          <el-radio
            v-model="boxRadio"
            label="0"
            style="margin-left: 10px"
            @change="getBoxTeamList"
            >全部</el-radio
          >
          <el-radio v-model="boxRadio" label="1" @change="getBoxTeamList"
            >仅报警</el-radio
          >
        </el-form-item>
        <el-form-item label="调度车辆：">
          <el-select
            v-model="form.car"
            placeholder="请选择"
            style="width: 50%"
            clearable
          >
            <el-option
              v-for="item in carList"
              :key="item.VID"
              :label="item.车牌号"
              :value="item.VID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调度描述：" style="height: 105px">
          <el-input
            type="textarea"
            :rows="6"
            v-model="form.Mark"
            placeholder="请输入"
            class="handle-input mr10"
            style="width: 37.5vw; border: 1px solid #a4aca7"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="addCommand()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
import BenzAMRRecorder from 'benz-amr-recorder'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      srcBig: '',
      imageList: [],
      playRec: null,
      videoPath: '',
      showBigDialogVisible: false,
      showVideoDialogVisible: false,
      showRecordVisible: false,
      showGuidanceVisible: false,
      isVisibleEdit: false,
      isVisibleEdit1: false,
      selectd: {
        StartDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), 'yyyy-MM-dd'),
        EndDate: formatDate(new Date(new Date().getTime() + 3600 * 1000 * 24), 'yyyy-MM-dd'),
        time: '',
        Name: "",
      },
      form: {
        groupingList: [],
        groupingValue: '',
        cphList: [],//车牌号列表
        guidance: '',
        alermTypeList: [{ label: '1分钟', value: '1' }, { label: '5分钟', value: '5' }, { label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }],
        alermTypeValue: '5',
        PeopleNumber: '1',
        VehicleNumber: '0',
        team: "",
        car: "",
      },
      isAuto: '0',
      roomRadio: '0',
      boxRadio: '0',
      client: '',
      clientList: [],
      fsList: [{ name: '短信发送' }, { name: '智慧手表' }],
      carteam: '',
      streetTeamList: [],
      communityTeamList: [],
      villageTeamList: [],
      roomTeamList: [],
      boxTeamList: [],
      carList: [],
      car: [],
      team: [],
      originalData: [],
      tableData: [],
      commandData: [],
      rectificationData: [],
      loading: false,
      // dxlist:[{
      // dxcar: '',
      // dxteam: '',}],
      dxcar: [],
      dxteam: [],

    }
  },
  created () {
    this.getIsAuto()
    // this.getTeamList()
  },
  mounted () {
    this.getlistdata()
    this.getStreetTeamList()
    // this.getcommandData()
    // this.getGroupingList()
  },
  methods: {
    // 获取调度状态
    async getIsAuto () {
      const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageAuto')
      this.isAuto = data.VALUE
      console.log(this.isAuto)
    },
    // 获取街道信息
    async getStreetTeamList () {
      const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageStreet?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.streetTeamList = data
    },
    // 获取社区信息
    async getCommunityTeamList () {
      const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageCommunity?ClientNo=' + this.form.streetClient)
      this.communityTeamList = data
      // }
    },
    // 获取小区信息
    async getVillageTeamList () {
      const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageVillage?ClientNo=' + this.form.communityClient)
      this.villageTeamList = data
      // }
    },
    // 获取点位信息
    async getRoomTeamList () {
      if (this.roomRadio === '0') {
        const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageRoom?ClientNo=' + this.form.villageClient)
        this.roomTeamList = data
      } else {
        const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageRoomAlarm?ClientNo=' + this.form.villageClient)
        this.roomTeamList = data
      }
      // }
    },
    // 获取垃圾桶信息
    async getBoxTeamList () {
      if (this.boxRadio === '0') {
        const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageRoomBox?ScoreRoomID=' + this.form.roomName)
        this.boxTeamList = data
      } else {
        const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageRoomBoxAlarm?ScoreRoomID=' + this.form.roomName)
        this.boxTeamList = data
      }
      // }
    },
    // 获取车辆
    async getCarTeamList () {
      const { data } = await this.$Http.get('/RubbishClassification/GetRubbishScoreManageVehicle?RoomID=' + this.form.roomName + "&BoxID=" + this.form.boxName)
      this.carList = data
      // }
    },
    // 改变调度状态
    async changeAuto () {

      const params = {
        isAuto: this.isAuto,
      }
      const { data } = await this.$Http.get('RubbishClassification/UpdateRubbishScoreManageAuto', { params })
      if (data.IsSucess) {
        this.$message.success('调度方式改变成功')
      } else {
        this.$message.error('调度方式改变失败');
      }
    },
    // 指导记录查询
    screeningData () {
      this.currentPage = 1;
      this.commandData = this.originalData
      console.log(this.commandData)
      if (this.form.name) this.commandData = this.commandData.filter(item => item.NAME.includes(this.form.name))
    },
    async getlistdata () {
      this.currentPage = 1;
      var url = 'RubbishClassification/GetRubbishScoreManageInfo?ClientNo=' + localStorage.getItem('CLIENT_NO')
        + '&StartDate=' + this.selectd.StartDate + '&EndDate=' + this.selectd.EndDate + '&Name=' + this.selectd.Name
      const { data } = await this.$Http.get(url)
      // 原始数据
      this.tableData = data
    },
    // 导出Excel
    // exportExcel () {
    //   let excelName = '移动状态信息表'
    //   const tHeader = ['车辆ID', '车辆名称', '车辆分组', '车辆类型', '移动状态', '移动时间', '开始移动时间', '最后移动时间']
    //   const filterVal = ['VID', 'LICENSE_PLATE', 'CAR_TYPE', 'CLIENT_NAME', 'IsRun', 'RunTime', 'BEGINDATE', 'ENDDATE']
    //   export2Excel(tHeader, filterVal, this.tableData, excelName)
    // },
    // 放大图片
    bigImage (row) {
      // this.srcBig = row.PHOTO1
      this.imageList = []
      if (row.PHOTO1 != '') {
        this.imageList.push(row.PHOTO1)
      }
      if (row.PHOTO2 != '') {
        this.imageList.push(row.PHOTO2)
      }
      if (row.PHOTO3 != '') {
        this.imageList.push(row.PHOTO3)
      }
      if (row.PHOTO4 != '') {
        this.imageList.push(row.PHOTO4)
      }
      if (row.PHOTO5 != '') {
        this.imageList.push(row.PHOTO5)
      }
      if (row.PHOTO6 != '') {
        this.imageList.push(row.PHOTO6)
      }
      if (row.PHOTO7 != '') {
        this.imageList.push(row.PHOTO7)
      }
      if (row.PHOTO8 != '') {
        this.imageList.push(row.PHOTO8)
      }
      if (row.PHOTO9 != '') {
        this.imageList.push(row.PHOTO9)
      }
      this.showBigDialogVisible = true
    },
    playRecord (index, row) {
      var recordPath = row.RecordPath
      var player = $('<amr src="' + recordPath + '"  crossOrigin="anonymous"></amr>')
      player = new amrEvent($(player));
      player && player.play(function (playing) {
        console.log("current player playing ?? " + playing)
      })
    },
    //播放语音
    openRecording (index, row) {
      let url = row.RecordPath
      // let url = _url.split('.com')[1]
      let vm = this
      if (vm.playRec !== null) {
        vm.stopPlayVoice()
      }
      vm.playRec = new BenzAMRRecorder()
      //⚠️注意跨域问题
      vm.playRec.initWithUrl('/record' + url).then(function () {
        vm.voiceActive = index
        vm.playRec.play()
        vm.playRec.onEnded(function () {
          vm.voiceActive = null
        })
      }).catch((e) => {
        console.log(e)
        vm.$message.error('播放录音失败')
      })
    },
    //停止播放
    stopPlayVoice () {
      if (this.playRec.isPlaying()) {
        this.playRec.stop()
      }
    },
    playVideo (index, row) {
      if (row.VideoPath != '' && row.VideoPath != null) {
        this.videoPath = row.VideoPath
        this.showVideoDialogVisible = true;
      } else {
        this.$message.error('未上传视频')
      }

    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },

    // 打开反馈记录
    rectificationRecord (index, row) {
      this.form = Object.assign({}, this.form, row);
      this.showRecordVisible = true
      this.getrectificationData()
    },
    // 打开指导记录
    guidanceRecord (index, row) {
      this.form = Object.assign({}, this.form, row);
      this.showGuidanceVisible = true
      this.getcommandData()
    },
    // 打开添加指导窗口
    handleAdd (index, row) {
      this.form = Object.assign({}, row);
      this.addDialogTitle = '车辆调度'
      //展示窗口
      this.isVisibleEdit = true;
      // this.idEdit = false;
    },
    // 车辆调度
    async addCommand () {
      const params = {
        BoxID: this.form.boxName,
        Vid: this.form.car,
        Mark: this.form.Mark,
      }
      const { data } = await this.$Http.get('RubbishClassification/InsertRubbishScoreManage', { params })
      if (data.IsSucess) {
        this.$message.success('调度成功')
        this.getlistdata()
        this.isVisibleEdit = false
      } else {
        this.$message.error('调度失败');
      }
    },
    // 选择某一个下拉框
    selectCar () {
      // this.dxlist.dxteam =  this.form.team
      // this.dxlist.dxcar =  this.form.car
      this.dxteam = this.form.team
      this.dxcar = this.form.car
    },
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>